<template>
	<el-form v-if="!readonly" ref="form" :model="form" :rules="rules" label-width="100px" style="padding: 24px;">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-form-item label="收货人" prop="consignee" required>
					<el-input v-model.trim="form.consignee" placeholder="请输入收货人" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="收货电话" prop="tel">
					<el-input v-model="form.tel" placeholder="请输入收货电话" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="收货手机" prop="phone" required>
					<el-input v-model.trim="form.phone" placeholder="请输入收货手机" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="真实姓名" prop="realName">
					<el-input v-model="form.realName" placeholder="请输入真实姓名" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="24">
			<el-col :span="12">
				<el-form-item label="省市区" prop="addrBrief" required>
					<el-input v-model="form.addrBrief" placeholder="请输入省市区" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="邮编" prop="postcode">
					<el-input v-model="form.postcode" placeholder="请输入邮编" />
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<el-form-item label="身份证" prop="idCard">
					<el-input v-model="form.idCard" placeholder="请输入身份证" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-form-item label="收货地址" prop="address" required>
					<el-input v-model="form.address" placeholder="请输入收货地址" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-form-item label="备注" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入备注" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
	<div v-else class="address-info" >
		<el-descriptions :column="3" border>
			<el-descriptions-item label="收货人">{{ form.consignee || '-' }}</el-descriptions-item>
			<el-descriptions-item label="收货电话">{{ form.tel || '-' }}</el-descriptions-item>
			<el-descriptions-item label="收货手机">{{ form.phone || '-' }}</el-descriptions-item>
			<el-descriptions-item label="真实姓名">{{ form.realName || '-' }}</el-descriptions-item>
			<el-descriptions-item label="省市区">{{ form.addrBrief || '-' }}</el-descriptions-item>
			<el-descriptions-item label="邮编">{{ form.postcode || '-' }}</el-descriptions-item>
			<el-descriptions-item label="身份证">{{ form.idCard || '-' }}</el-descriptions-item>
			<el-descriptions-item label="收货地址" :span="3">{{ form.address || '-' }}</el-descriptions-item>
			<el-descriptions-item label="备注" :span="3">{{ form.remark || '-' }}</el-descriptions-item>
		</el-descriptions>
	</div>
</template>

<script>
import {
  listDeliveryByOrderId
} from "@/api/mes/sales/saleOrder";
export default {
	name: 'addressForm',
		props: {
			readonly: {
				type: Boolean,
				default: false
			},
			cellId: {
				type: String,
				default: ''
			}
		},
		watch: {
			cellId: {
				immediate: true,
				handler(newVal) {
					if (newVal && newVal !== 'add') {
						listDeliveryByOrderId(newVal).then(res => {
							if (res.code === 200) {
								this.form = res.data;
							}
						})
					} else {
						this.form = {
							consignee: '',
							tel: '',
							phone: '',
							realName: '',
							addrBrief: [],
							postcode: '',
							idCard: '',
							address: '',
							remark: ''
						};
					}
				}
			}
		},
		data() {
			return {
				form: {
					consignee: '',
					tel: '',
					phone: '',
					realName: '',
					addrBrief: [],
					postcode: '',
					idCard: '',
					address: '',
					remark: ''
				},
				regionOptions: [], // 省市区下拉选项
				rules: {
				consignee: [
					{ required: true, message: '请输入收货人', trigger: 'blur' }
				],
				phone: [
					{ required: true, message: '请输入收货手机', trigger: 'blur' }
				],
				addrBrief: [
					{ required: true, message: '请输入省市区', trigger: 'blur' }
				],
				address: [
					{ required: true, message: '请输入收货地址', trigger: 'blur' }
				]
			}
		}
	}
}
</script>

<style lang="scss" scoped>
el-form {
	background: #fff;
}

.address-info {
	background: #fff;
	 ::v-deep.el-descriptions-item__label {
        width: 120px;
        min-width: 120px;
      }
}
</style>

